﻿<link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/GreenIdeas.css")" />
<link href="@Url.Content("~/Content/Admin.css")" rel="stylesheet" type="text/css" />

@model IList<XichLoGreen.Models.IdeaModel>

@{
    ViewBag.Title = "GreenIdeas";
    Layout = "~/Views/Shared/_Layout.cshtml";

    XichLoGreen.Models.UserModel user = null;
    try
    {
        user = (XichLoGreen.Models.UserModel)Session["Account"];
    }
    catch (Exception)
    {
        throw;
    }

    var isLogIn = user == null ? '0' : '1';
}


<div id="data_composer">
    <div>
        <form id="content-form" action="@Url.Action("PostIdea","GreenIdeas")" method="post">
            <div style="margin-bottom:7px;">
                <input id="Idea_name" name="Idea_name" type="text" placeholder="What's your idea title?" title="Idea's title" value="@ViewBag.IdeaTitle" />
            </div>

            <div id="content">
                <textarea id="Idea_content" onfocus="show()" onblur="hide()" name="Idea_content" aria-owns="js_0" aria-expanded="false" aria-autocomplete="list"
                    role="textbox" placeholder="What's your idea?" title="What's your idea?"
                    aria-label="What's idea content?" aria-haspopup="true" cols="50" rows="5">@ViewBag.Content</textarea>
            </div>

            <div class="footer">
                <span class="error-message">@ViewBag.Message</span>
                <button type="submit"">Post</button>
            </div>
        </form>
    </div>

    <div id="lst_ideas">
        <ul class="ideas_panel">
            @for (var i = 0; i < Model.Count; i++)
            {
                var idea = Model[i];
                var id = "lstComment_" + i;
                var like_id = "like_count_" + i;
                var name = user==null?"Anonymous":user.Name;
                var content = new HtmlString(idea.Content);
                var avatar = idea.Author.Name == "Demo User" ? "~/Content/profiles/user123.jpg" : "~/Content/profiles/user234.jpg";
                <li>
                    <div class="container">
                        <a class="avatar">
                            <img src="@Url.Content(avatar)" />
                        </a>
                        <div class="inner-content">
                            <div class="header">
                                <span class="name">
                                    <span class="username" dir="ltr">
                                        <a href="#">@idea.Author.Name</a>
                                    </span>
                                    <img src="@Url.Content("~/Content/img/arrow.png")" />
                                    <span class="title">
                                        <a  href="#">@idea.Title</a>
                                    </span>
                                </span>
                            </div>

                            <div class="content">
                                <span>@content</span>
                            </div>

                            <form>
                                <span class="details">
                                    <span class="like">
                                        <a class="like" title="Like this" href="#" onclick="like('@like_id')">Like</a>
                                    </span>
                                    <span class="unlike">
                                        <a title="Unlike this" href="#" style="color: blue; text-decoration: none">UnLike</a>
                                    </span>
                                    <span class="time">
                                        <a href="#">
                                            <abbr style="border-bottom:medium none" title="@idea.DateCreated">@idea.DateCreated</abbr></a>
                                    </span>
                                </span>

                                <div class="comments">
                                    <ul id=@id >
                                        <li style="margin-left: -40px"></li>
                                        <li style="background-color: #EDEFF4; margin-left: -40px">
                                            <div>
                                                <div style="float: left">
                                                    <a title="Like this"><i style="background-image: url(http://static.ak.fbcdn.net/rsrc.php/v2/yg/r/Qdv04UHuWZa.png); background-position: 0px -35px; display: block; height: 13px; width: 15px"></i></a>
                                                </div>
                                                <div>
                                                    <span>
                                                        <a id=@like_id href="#" style="color:gray;text-decoration:none;margin-left:6px">0 people </a>
                                                        <span>like this</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>

                                        @if(user != null)
                                        {
                                            var com = user.Name == "Demo User" ? "~/Content/profiles/user123_com.png" : "~/Content/profiles/user234_com.jpg";
                                        <li class="write-comment">
                                            <div>
                                                <div style="float: left">
                                                    <a href="#">
                                                        <img src="@Url.Content(com)" /></a>
                                                </div>
                                                <div>
                                                    <div style="margin: 0px; padding: 0px 0px 0px 8px; overflow: hidden">
                                                        <div>
                                                            <div class="comment-details">
                                                                <textarea title="Write a comment..." aria-label="Write a comment..." placeholder="Write a comment..." onKeydown="writeComment('@id',event,this,'@name')"></textarea>
                                                            </div>
                                                            <span style="color: gray; font-size: 9px">Press Enter to post</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        }
                                        else
                                        {
                                        <li class="write-comment">
                                            <div style ="margin-left:-4px">
                                                <div style="float: left">
                                                    <a><i style="background-image:url(@Url.Content("~/Content/img/comment_icon.png")); display: block; height: 13px; width: 15px"></i></a>
                                                </div>
                                                <div>
                                                    <span style="padding-left:6px;color:gray">
                                                        <span>Please </span>
                                                        <a href="#" onclick="login()" style="color:blue;text-decoration:none">log in</a>
                                                        <span> to comment this idea !</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                        }
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
            }

        </ul>

        <div id="overlay">
               <form action="@Url.Action("Login","GreenIdeas")" method="post">
                    <div class="login-form clear">
                    <span>
                        <input id="username" name="username" type="text" placeholder="Username" />
                    </span>
                    <span>
                        <input id="password" name="password" type="password" placeholder="Password" />
                    </span>
                    <span>
                        <button type="submit">Log In</button>
                    </span>
                    </div>
                </form>
        </div>

    </div>
</div>

<script type="text/javascript">
    function writeComment(id, e, element,u) {
        if (e.keyCode == 13) {
            e.preventDefault();
            var text = element.value;
            element.value = '';
            var now = new Date();
            var avatar = u == "Demo User" ? "../../Content/profiles/user123_com.png" : "../../Content/profiles/user234_com.jpg";
            var html = '<div>' +
                        '<div style="float:left">' +
                            '<a href="#"><img style="display:block;width:32px;height:32px" src="'+avatar+'"/></a>' +
                        '</div>' +

                        '<div>' +
                            '<div style="margin:0px;padding:0px 0px 0px 8px;overflow:hidden">' +
                                '<div></div>' +
                                '<div>' +
                                    '<div>' +
                                        '<a style="font-weight:bold; color:blue; text-decoration:none" href="#">'+u+'</a>' +
                                        '<span></span>' +
                                        '<span style="word-wrap:break-word;padding-left:5px">' +
                                            text +
                                        '</span>' +
                                    '</div>' +

                                    '<div>' +
                                        '<span>' +
                                            '<span></span>' +
                                            '<a href="#" style="color:gray;text-decoration:none;font-size:11px"><abbr style="border-bottom:medium none" title="' + now.toLocaleString() + '">' + now.toLocaleString() + '</abbr></a>' +
                                        '</span>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                        '</div>';
            var node = document.getElementById(id);
            var node2 = document.createElement("li");
            node2.style.backgroundColor = 'rgb(237, 239, 244)';
            node2.style.marginTop = '1px';
            node2.style.padding = '4px';
            node2.style.marginLeft = '-40px';
            node2.innerHTML = html;
            node.insertBefore(node2, node.children[node.children.length - 1]);
        }
    }

    function show() {
        var form = document.getElementById("content-form");
        form.children[0].style.display = '';
        form.children[2].style.display = '';
    }

    function hide() {
        var form = document.getElementById("content-form");
        if (form.children[1].firstElementChild.value == ''&&form.children[0].firstElementChild.value=='') {
            form.children[0].style.display = 'none';
            form.children[2].style.display = 'none';
        }
    }

    function like(id) {
        var likeCount = document.getElementById(id);
        var l = likeCount.innerHTML;
        var count = parseInt(l);
        count = count + 1;
        likeCount.innerHTML = count + (count > 1 ? " peoples" : " people");
    }

    function overlay() {
            el = document.getElementById("overlay");
            el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    }

    function post() {
        var form = document.getElementById("content-form");
        form.action = '/GreenIdeas/PostIdea';
        form.method = 'POST';
        form.submit();
    }

    function login() {
        overlay();
    }

    window.onload = hide();
</script>
